<template>
  <view class="container">
    <!-- 背景图 -->
    <view class="background-image"></view>

    <!-- 按钮容器 -->
    <view class="button-container">
      <!-- 第一个按钮 -->
      <button class="custom-button" @click="handleFirstClick">
        附近技师
      </button>

      <!-- 第二个按钮 -->
      <button class="custom-button secondary" @click="handleSecondClick">
        应聘技师
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面数据
    };
  },
  onLoad(option) {
    // 页面加载时执行
	console.log(option)
  },
  methods: {
    // 第一个按钮点击事件
    handleFirstClick() {
      uni.navigateTo({
      	url:'/pages/service'
      })
    },

    // 第二个按钮点击事件
    handleSecondClick() {
      window.open('http://www.baidu.com')
    }
  }
};
</script>

<style scoped>
/* 页面容器，使内容居中 */
.container {
  position: relative;
  min-height: 100vh; /* 占满整个屏幕高度 */
  overflow: hidden; /* 防止背景图溢出 */
}

/* 背景图样式 */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 替换为你的背景图片路径 */
  background-image: url('/static/image/tu.png');
  background-size: cover; /* 图片铺满容器 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 图片不重复 */
  z-index: 0; /* 确保背景图在最底层 */
}

/* 按钮容器，垂直排列按钮并居中 */
.button-container {
  position: relative;
  z-index: 1; /* 确保按钮在背景图上方 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  gap: 30rpx; /* 按钮之间的间距 */
  width: 80%; /* 宽度为屏幕的80% */
  max-width: 500rpx; /* 最大宽度限制 */
  margin: 0 auto; /* 水平居中 */
  padding-top: 50vh; /* 垂直方向居中的一种方式 */
  transform: translateY(-50%); /* 垂直居中调整 */
}

/* 自定义按钮样式 */
.custom-button {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 34rpx;
  border-radius: 20rpx;
  background-color: rgba(0, 122, 255, 0.9); /* 半透明蓝色背景 */
  color: #ffffff; /* 白色文字 */
  border: none; /* 去除默认边框 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2); /* 按钮阴影 */
}

/* 次要按钮样式 */
.custom-button.secondary {
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  color: #007aff; /* 蓝色文字 */
}

/* 按钮按下时的样式 */
.custom-button:active {
  opacity: 0.8; /* 按下时透明度降低 */
  transform: scale(0.98); /* 轻微缩小效果 */
}
</style>
